<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>查询条件</title>

    <link type="text/css" rel="stylesheet" media="all"
          href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" media="all"
          href="css/resultTable.css"/>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mainDiv">
    <h2>QueryBuilder静态页面</h2>
    <div id="queryBuider" class="query" align="center">
        <table id="tableClass" class="tableClass">
            <tr>
                <td class="">
                    <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true">
                        <option value="and">并且</option>
                        <option value="or">或</option>
                    </select>
                </td>
                <td class="seperator">
                    <div  class="querystmts">
                        <div class="right">
                            <div class="form-group">
                                <img src="css/images/2.png" alt="Remove"   class="remove"/>
                            </div>
                            <div>
                                <select id="col" style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true" >
                                    <optgroup label="user1">
                                        <option value="user1.id">编号</option>
                                        <option value="user1.name">姓名</option>
                                    </optgroup>
                                    <optgroup label="user2">
                                        <option value="user2.id">编号</option>
                                        <option value="user2.name">姓名</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="form-group">
                                <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true">
                                    <option value="=">等于</option>
                                    <option value="!=">不等于</option>
                                    <option value="<">小于</option>
                                    <option value="<=">小于等于</option>
                                    <option value=">">大于</option>
                                    <option value=">=">大于等于</option>
                                    <option value="between">在..范围之内</option>
                                    <option value="not between">不在..范围之内</option>
                                    <option value="is null">为null</option>
                                    <option value="is not null">不为null</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input class="form-control"  placeholder="请输入名称" type="text">
                            </div>
                        </div>
                        <div  class="right">
                            <div class="form-group">
                                <img src="css/images/2.png" alt="Remove"   class="remove"/>
                            </div>
                            <div>
                                <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true">
                                    <optgroup label="user1">
                                        <option value="user1.id">编号</option>
                                        <option value="user1.name">姓名</option>
                                    </optgroup>
                                    <optgroup label="user2">
                                        <option value="user2.id">编号</option>
                                        <option value="user2.name">姓名</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div>
                                <select style="cursor:pointer"  class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true">
                                    <option value="">-------</option>
                                    <option value="=">等于</option>
                                    <option value="!=">不等于</option>
                                    <option value="<">小于</option>
                                    <option value="<=">小于等于</option>
                                    <option value=">">大于</option>
                                    <option value=">=">大于等于</option>
                                    <option value="between">在..范围之内</option>
                                    <option value="not between">不在..范围之内</option>
                                    <option value="is null">为null</option>
                                    <option value="is not null">不为null</option>
                                </select>
                            </div>
                            <div>
                                <input class="form-control" placeholder="请输入最小值" type="text">--<input type="text" class="form-control"  placeholder="请输入最大值">
                            </div>
                        </div>
                    </div>
                    <div>
                        <!--<img  class="add" style="cursor:pointer" src="css/images/add.gif" alt="添加新行">-->
                        <span class="label label-primary">添加新行</span>
                        <span class="label label-success">新组</span>
                        <!--<input type="button" class="ui-button-text ui-c" style="cursor:pointer" value="新组">-->
                        <table  class="tableClass">
                            <tr>
                                <td>
                                    <img src="css/images/2.png" style="cursor:pointer" alt="Remove"  class="remove">
                                    <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true">
                                        <option value="and">并且</option>
                                        <option value="or">或</option>
                                    </select>
                                </td>
                                <td class="seperator">
                                    <div  class="querystmts">
                                        <div  class="right">
                                            <div>
                                                <img src="css/images/2.png" alt="Remove" class="remove head">
                                            </div>
                                            <div>
                                                <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true"  onchange="changeSelect(this)">
                                                    <optgroup label="user1">
                                                        <option value="user1.id">编号</option>
                                                        <option value="user1.name">姓名</option>
                                                    </optgroup>
                                                    <optgroup label="user2">
                                                        <option value="user2.id">编号</option>
                                                        <option value="user2.name">姓名</option>
                                                    </optgroup>
                                                </select>
                                            </div>
                                            <div>
                                                <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true" >
                                                    <option value="=">等于</option>
                                                    <option value="!=">不等于</option>
                                                    <option value="<">小于</option>
                                                    <option value="<=">小于等于</option>
                                                    <option value=">">大于</option>
                                                    <option value=">=">大于等于</option>
                                                    <option value="between">在..范围之内</option>
                                                    <option value="not between">不在..范围之内</option>
                                                    <option value="is null">为null</option>
                                                    <option value="is not null">不为null</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="right">
                                            <div>
                                                <img src="css/images/2.png" alt="Remove"  class="remove">
                                            </div>
                                            <div>
                                                <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true">
                                                    <optgroup label="user1">
                                                        <option value="user1.id">编号</option>
                                                        <option value="user1.name">姓名</option>
                                                    </optgroup>
                                                    <optgroup label="user2">
                                                        <option value="user2.id">编号</option>
                                                        <option value="user2.name">姓名</option>
                                                    </optgroup>
                                                </select>
                                            </div>
                                            <div>
                                                <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true" >
                                                    <option value="=">等于</option>
                                                    <option value="!=">不等于</option>
                                                    <option value="<">小于</option>
                                                    <option value="<=">小于等于</option>
                                                    <option value=">">大于</option>
                                                    <option value=">=">大于等于</option>
                                                    <option value="between">在..范围之内</option>
                                                    <option value="not between">不在..范围之内</option>
                                                    <option value="is null">为null</option>
                                                    <option value="is not null">不为null</option>
                                                </select>
                                            </div>
                                        <div>
                                            <input id="numInput" class="form-control" placeholder="请输入名称" type="text" style="ime-mode:disabled;"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <img id="add" class="add" style="cursor:pointer"
                                              src="css/images/add.gif" alt="添加新列">
                                        <input id="addroot" type="button"  class="ui-button-text ui-c"  style="cursor:pointer"  value="新组">
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <input value="获取SQL" type="button"/>

    <!--浮动的详细信息-->
    <div class="detail_info" id="box_detail"></div>
</div>
</body>
</html>